import { NavBar, DatePicker } from 'antd-mobile'
import './index.scss'
import { useEffect, useMemo, useState } from 'react'
import classNames from 'classnames'
import dayjs from 'dayjs'
import { useSelector } from 'react-redux'
import _ from 'lodash'
import DailyBill from './components/DailyBill'

const Month = () => {
  const [visible, setVisible] = useState(false) // 控制日期选择弹层
  const [currentDate, setCurrentDate] = useState(() => {
    return dayjs(new Date()).format('YYYY-MM')
  }) // 控制时间显示

  // 确定时间选择 回调
  const handleConfirm = (date) => {
    setVisible(false)
    const selectDate = dayjs(date).format('YYYY-MM')
    setCurrentDate(selectDate)
    console.log('你选择的月份', selectDate)
    console.log(monthGroup[selectDate])
    // 如果选择的月份没有账单记录
    if (!monthGroup[selectDate]) {
      return setMonthList([])
    }
    setMonthList(monthGroup[selectDate])
  }

  // 月数据
  const [monthList, setMonthList] = useState([]) // 按月做处理选择的的数据
  const billList = useSelector((state) => state.bill.billList)
  // 对源数据二次处理 useMemo类似于计算属性
  const monthGroup = useMemo(() => {
    return _.groupBy(billList, (item) => dayjs(item.date).format('YYYY-MM'))
  }, [billList])

  // 日数据
  const dayGroup = useMemo(() => {
    const groupData = _.groupBy(monthList, (item) => dayjs(item.date).format('YYYY-MM-DD'))
    const keys = Object.keys(groupData)
    return {
      groupData,
      keys
    }
  }, [monthList])

  // 初始化的时候渲染当前时间对应的列表
  useEffect(() => {
    if (monthGroup[dayjs(new Date()).format('YYYY-MM')]) {
      setMonthList(monthGroup[dayjs(new Date()).format('YYYY-MM')])
    }
  }, [monthGroup])

  // 对选择的日期做一下收支计算
  const monthResult = useMemo(() => {
    const pay = monthList.filter((item) => item.type === 'pay').reduce((total, current) => total + current.money, 0)
    const income = monthList
      .filter((item) => item.type === 'income')
      .reduce((total, current) => total + current.money, 0)
    return {
      pay,
      income,
      total: income + pay
    }
  }, [monthList])

  return (
    <div className="monthlyBill">
      <NavBar className="nav" backArrow={false}>
        月度收支
      </NavBar>
      <div className="content">
        {/* 月数据 */}
        <div className="header">
          {/* 时间切换区域 */}
          <div className="date">
            <span
              className="text"
              onClick={() => {
                setVisible(true)
              }}
            >
              {currentDate} 月账单
            </span>
            <span className={classNames('arrow', visible && 'expand')}></span>
          </div>
          {/* 统计区域 */}
          <div className="twoLineOverview">
            <div className="item">
              <span className="money">{monthResult.pay.toFixed(2)}</span>
              <span className="type">支出</span>
            </div>
            <div className="item">
              <span className="money">{monthResult.income.toFixed(2)}</span>
              <span className="type">收入</span>
            </div>
            <div className="item">
              <span className="money">{(monthResult.pay + monthResult.income).toFixed(2)}</span>
              <span className="type">结余</span>
            </div>
          </div>
          {/* 时间选择器 */}
          <DatePicker
            className="kaDate"
            title="记账日期"
            precision="month"
            visible={visible}
            max={new Date()}
            onClose={() => setVisible(false)}
            onConfirm={handleConfirm}
            onCancel={() => setVisible(false)}
          />
        </div>
        {/* 日数据 */}
        {dayGroup.keys.map((item) => {
          return <DailyBill key={item} date={item} data={dayGroup.groupData[item]}></DailyBill>
        })}
      </div>
    </div>
  )
}

export default Month
